<template>
  <div class="home">
    <div style="height: 50px; top: 0; position: fixed; width: 100%; z-index: 1000;">
      <div style="display: flex; justify-content: center; align-items: center; height: 100%;margin-top: 2vw">
        <div class="header-container" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;">
          <p class="header-title">物联网系统</p>
          <dv-decoration5 class="header-decoration" :dur="2" />
        </div>
        <span  style="font-size: 1vw;color:#02a8f1;margin-left: 55vw">{{ currentTime }}</span>
      </div>

      <div style="display: flex; justify-content: center;align-items: center">
        <!-- 假设 dv-decoration8 是一个装饰性的元素，这里我们保持原样 -->
        <dv-decoration8 style="width: 40vw; height: 3vw;" />
        <dv-decoration6 style="width: 10vw;height: 0.5vw;margin-left: 2vw;margin-right: 2vw" />
        <dv-decoration8 :reverse="true" style="width: 40vw; height: 3vw;" />
      </div>
    </div>
    <div>

      <div style="width: 98vw;height: 50vw;margin-top: -25vw;display: flex; align-items: center;">
        <div style="width: 25vw; height: 30vw;margin-top: 10vw">
          <div style="height: 15vw;width: 100%;margin-top: -3vw">
            <dv-border-box11 :color="['#57c1f2', '#021e27']" title="天气状况">
              <div style="width: 26vw;height: 28vw;display: flex; align-items: center; justify-content: center;">
                <div style="margin-top: -9vw">
                  <div style="width: 26vw;margin-left: 2vw">
                    <p style="color: #09c5b4;font-size: 1vw">未来三天有雷阵雨，注意灌溉管理，预防作物受损</p>
                  </div>
                  <div style="display: flex; align-items: center; justify-content: center;">
                    <div>
                      <p style="font-size: 3vw;color: dodgerblue;font-weight: bold;margin-top: 3vw;margin-left: -3vw">8℃</p>
                    </div>
                    <div>
                      <el-icon style="color: white;font-size: 5vw;margin-left: 3vw"><MostlyCloudy /></el-icon>
                    </div>

                  </div>
                </div>
              </div>
            </dv-border-box11>
          </div>

          <div style="width: 25vw; height: 20vw; display: flex; align-items: center; justify-content: center;margin-top: 2vw">
            <dv-border-box3 style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
              <div style="margin-left: 1.5vw;">
                <p style="color: whitesmoke;font-size: 0.8vw;text-align: center;padding-top: 0.5vw">未来一周天气评估</p>
                <broken-line style="width: 22vw; height: 15vw;"></broken-line>
              </div>
            </dv-border-box3>
          </div>

        </div>

        <div style="height: 100%;width: 50vw">
          <div style="display: flex; margin-top: 10vw;width: 50vw;height: 41vw">
            <dv-border-box11 title="智慧大鹏实时摄像" :title-width="400" :animate="true" :color="['#1fada0', '#052027']" >
              <div style="display: flex; justify-content: center; align-items: center;margin-top: 3vw;">
                <camera style="width: 48vw;height: 36vw"></camera>
              </div>
            </dv-border-box11>
          </div>
        </div>

        <div style="width: 22vw;margin-top: 25vw">
          <div style="overflow: hidden;">
            <div style="width: 100%;">
              <p style="color: #33f2dc;font-size: 1vw;text-align: center;padding-top: 0.2vw">数据展示</p>
              <div style="display: flex; justify-content: center; align-items: center; background-color: #08292e; color: #41b4a7; width: 90%; margin-left: 1vw;">
                <p>所属大棚</p>
                <p style="margin-left: 5vw; margin-right: 5vw">名称</p>
                <p>值</p>
              </div>
            </div>
          </div>
          <div style="display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem;margin-top: -0.2vw">
            <div v-for="data in dataList" style="background: #195453; border-radius: 4px; padding: 0.5rem; color: #33f2dc; font-size: 0.8rem;">
              <div style="display: flex; justify-content: space-between;">
                <p>{{data.boxId}}</p>
                <p>{{data.name}}</p>
                <p>{{data.value}}</p>
              </div>
            </div>
          </div>

        </div>



      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Decoration5 as DvDecoration5 } from '@kjgl77/datav-vue3'
import { Decoration8 as DvDecoration8 ,Decoration6 as DvDecoration6} from '@kjgl77/datav-vue3'
import { BorderBox11 as DvBorderBox11, BorderBox8 as DvBorderBox8 ,BorderBox9 as DvBorderBox9,BorderBox3 as DvBorderBox3} from '@kjgl77/datav-vue3'
import {inject, onMounted, onUnmounted, ref} from "vue";
import Camera from "@/components/camera.vue";
import {MostlyCloudy} from "@element-plus/icons-vue";
import BrokenLine from "@/components/brokenLine.vue";

const currentTime = ref<string>(''); // 初始化为空字符串

const updateTime = () => {
  // 获取当前日期和时间
  const now = new Date();
  // 格式化日期和时间
  const formattedDate = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    weekday: 'long'
  });
  const formattedTime = now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
  // 组合日期和时间字符串
  currentTime.value = `${formattedDate} ${formattedTime}`;
};


const $http = inject("$axios")
const dataList = ref([])
async function getData(){
  $http.get("http://localhost:8080/sensor").then(res=>{
    dataList.value = res.data
    console.log(dataList.value)
  }).catch(err=>{
    console.log(err)
  })
}


onMounted(() => {
  const intervalId = setInterval(updateTime, 1000);
  onUnmounted(() => clearInterval(intervalId));
  getData()
});
</script>

<style scoped>

body {
  margin: 0;
  padding: 0;
}

.home {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #000a1e;
  min-width: 100vw;
  min-height: 100vh;
  background-size: cover; /* 让背景图全屏显示并保持比例 */
  height: 150vh; /* 设置高度为视窗高度 */
  margin-bottom: -10vw;
}

.header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px; /* 根据需要调整内边距 */
}

.header-title {
  font-size: 1.5vw; /* 根据设计需求调整字体大小 */
  color: whitesmoke;
  font-weight: bold;
  margin: 0 0 10px; /* 根据需要调整外边距 */
}

.header-decoration {
  width: 10vw;
  height: 1vw;
  margin-bottom: 20px; /* 根据需要调整外边距 */
}
</style>